import React, { Component } from 'react'
import { Pagination,Button } from 'antd'
import { UsergroupAddOutlined } from '@ant-design/icons'
import MyEmpty from '../../../components/myempty'
import './course_more.less'
import TopNav from '../../top_nav'
import BottomBar from '../../bottom_bar'
import courseApi from '../../../api/course'
import { getMemberInfo } from '../../../utils/auth'
import parseUrl from '../../../utils/parseUrl'
class Course extends Component {
  state = {
    courseTypeTitle: '',
    courseLists: [],
    pageNum: 1,
    pageSize: 20,
    total: 0,
  }
  componentDidMount() {
    window.scrollTo(0, 0)
    const { courseTypeId } = parseUrl(this.props.location.search)
    const { pageNum, pageSize } = this.state
    this.getCourseList(courseTypeId, pageNum, pageSize)
  }
  getCourseList = (courseTypeId, pageNum, pageSize) => {
    let jsonData = { courseTypeId, pageNum, pageSize }
    courseApi.getListByTypeId(jsonData).then(res => {
      if (res.success) {
        this.setState({
          courseLists: res.data.records,
          courseTypeTitle: res.data.courseTypeTitle,
          total: res.data.total
        })
      }
    }).catch(err => {
      console.log(err);
    })
  }
  // 修改页码
  onPageChange = (current, pageSize) => {
    this.getCourseList(parseUrl(this.props.location.search).courseTypeId, current, pageSize)
  }
  goCourseDetail = (courseId) => {
    return () => {
      const memberId = getMemberInfo().id
      if(!memberId){
        courseApi.clickCourse({courseId})
      }else{
        courseApi.clickCourse({courseId,memberId})
      }
      this.props.history.push({
        pathname: '/course-detail',
        search: "courseId="+courseId
      })
    }
  }
  render() {
    const { pageNum, total, courseTypeTitle,courseLists } = this.state
    return (
      <div className="course-more-container">
        <TopNav style={{ background: '#fff', color: '#666' }} active="/course" />
        <div className="content-box">
          <div className="content">
            <h2>{courseTypeTitle}（{total}）</h2>
            <div className="mode-main">
              {courseLists && courseLists.length ?
                courseLists.map(item => {
                  return (<div className="mode-item" key={item.id} onClick={this.goCourseDetail(item.id)}>
                    <div className="image-box">
                      <img src={item.url} alt="课程图片" />
                    </div>
                    <h3>{item.title}</h3>
                    <p>{item.description}</p>
                    <div className="item-bottom">
                      <span style={{ color: '#409EFF' }}>{item.status === 1 ? '完结' : '更新中'}</span>
                      <Button icon={<UsergroupAddOutlined />} type="primary">{item.views}人看过</Button>
                    </div>
                    <div className="sort">{item.sort}</div>
                  </div>)
                }) : <div style={{ width: '100%', display: "flex", justifyContent: 'center' }}><MyEmpty /></div>
              }
            </div>
          </div>
          <div className="page-box">
            <Pagination
              defaultPageSize={20}
              onChange={this.onPageChange}
              defaultCurrent={pageNum}
              total={total}
            />
          </div>
        </div>
        <BottomBar style={{ background: '#f9f9f9', borderTop: '1px solid #e5e5e5' }} />
      </div>
    )
  }
}

export default Course